<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title>Ocean HTML5 Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    
    <!-- Bootstrap Stylesheet -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Animate -->
    <link rel="stylesheet" href="css/animate.min.css">


    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    
    <!-- Normailize Stylesheet -->
    <link rel="stylesheet" href="css/normalize.min.css">

    <!-- Main Styles -->
    <link rel="stylesheet" href="css/templatemo_style.css">

    <script src="js/vendor/modernizr-2.6.2.min.js"></script>

</head>
<body>
    <!--[if lt IE 7]>
    <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="#/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->
    

    <div id="responsive-menu">
        <ul class="menu-holder">
            <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
            <li><a href="#services"><i class="fa fa-cogs"></i>Services</a></li>
            <li><a href="#products"><i class="fa fa-list"></i>Products</a></li>
            <li><a href="#video"><i class="fa fa-list"></i>Video</a></li>
            <li><a href="#contact"><i class="fa fa-envelope"></i>Contact</a></li>
        </ul>
    </div>

    <!-- HEADER -->
    <header class="site-header">
        <div class="container">
            <div class="row">
                <div class="menu-holder">
                    <div class="col-md-3 col-sm-2 logo">
                        <a href="#" title="templatemo 420 ocean">
                            <img src="images/templatemo-logo.png" alt="templatemo 420 ocean">
                        </a>
                    </div>
                    <div class="col-md-7 col-sm-8">
                        <nav class="main-menu hidden-xs">
                            <ul>
                                <li><a href="#">Home</a></li>
                                <li><a href="#services">Services</a></li>
                                <li><a href="#products">Products</a></li>
                                <li><a href="#video">Video</a></li>
                                <li><a href="#contact">Contact</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="col-md-2 col-sm-2 col-xs-12">
                        <ul class="social-top">
                            <li><a href="#"><i class="fa fa-facebook"></i><span class="hidden-xs">Facebook</span></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i><span class="hidden-xs">Twitter</span></a></li>
                            <li><a href="#"><i class="fa fa-instagram"></i><span class="hidden-xs">Instagram</span></a></li>
                        </ul>
                    </div>
                </div>


                <div class="text-right visible-xs">
                    <a href="#" id="mobile_menu"><span class="fa fa-bars"></span></a>
                </div>
            </div>
        </div>
    </header> <!-- .site-header -->
     <div class="copyrights">Collect from <a href="http://www.cssmoban.com/"  title="网站模板">网站模板</a></div>
    
    
    <!-- TOP CONTENT -->
    <div class="top-c">
        <div class="container">
            <div class="row">
                <div class="col-md-offset-1 col-lg-5 col-md-5 col-xs-offset-1 col-sm-5 col-xs-8 col-xs-offset-2">
                    <div class="topc-img">
                        <img src="images/slide1.png" alt="">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <h3 class="topc-title">Ocean HTML5 Template</h3>
                    <ul>
                        <li><i class="fa fa-check"></i>Integer sollicitudin dolor quis quam fermentum, quis congue nulla tincidunt.</li>
                        <li><i class="fa fa-check"></i>Fusce malesuada erat non magna blandit, eu placerat ipsum dignissim.</li>
                        <li><i class="fa fa-check"></i>Vestibulum euismod turpis auctor, lobortis quam non, lacinia ligula.</li>
                        <li><i class="fa fa-check"></i>Sed tristique quam in magna euismod, et ullamcorper ipsum tempus.</li>
                        <li><i class="fa fa-check"></i>Nullam dapibus odio nec orci euismod, vitae scelerisque dolor facilisis.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <!-- SERVICES -->
    <div class="content-section" id="services">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-xs-6 text-center">
                    <div class="service-item">
                        <div class="service-icon">
                            <i class="fa fa-video-camera"></i>
                        </div>
                        <h3 class="service-title">RESPONSIVE LAYOUT</h3>
                    </div> <!-- .service-item -->
                </div> <!-- .col-md-3 -->
                <div class="col-md-3 col-xs-6 text-center">
                    <div class="service-item">
                        <div class="service-icon">
                            <i class="fa fa-desktop"></i>
                        </div>
                        <h3 class="service-title">CLEAN AND MINIMAL</h3>
                    </div> <!-- .service-item -->
                </div> <!-- .col-md-3 -->
                <div class="col-md-3 col-xs-6 text-center">
                    <div class="service-item">
                        <div class="service-icon">
                            <i class="fa fa-headphones"></i>
                        </div>
                        <h3 class="service-title">CREATIVE IDEAS</h3>
                    </div> <!-- .service-item -->
                </div> <!-- .col-md-3 -->
                <div class="col-md-3 col-xs-6 text-center">
                    <div class="service-item">
                        <div class="service-icon">
                            <i class="fa fa-support"></i>
                        </div>
                        <h3 class="service-title">PREMIUM SUPPORT</h3>
                    </div> <!-- .service-item -->
                </div> <!-- .col-md-3 -->
            </div> <!-- .row -->
        </div> <!-- .container -->
    </div> <!-- #services -->

    
    <!-- PRODUCTS -->
    <div class="content-section" id="products">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="col-md-5 col-xs-12 text-center">
                        <img src="images/product-1.png" alt="">
                    </div>                    
                    <div class="product-content col-md-7 col-xs-12">
                        <h3>Digital Content</h3>
                        <span>New Pen Tool</span>
                        <p>Ocean is <a href="#">free HTML5 template</a> from templatemo website. Credit goes to Smashing Magazine for <a href="http://www.smashingmagazine.com/2012/11/20/art-professions-icons-png/">Art Professions Icon set</a>. Aenean risus neque, dignissim nec orci in, hendrerit tempor ligula. Suspendisse sed nisi eget sapien ltrices.</p>
                    </div>
                </div> <!-- .col-md-6 -->
                <div class="col-md-6">
                    <div class="product-content col-md-7 col-xs-12">
                        <h3>Artwork Creation</h3>
                        <span>Simple Drawing</span>
                        <p>You can easily <a rel="nofollow" href="http://fortawesome.github.io/Font-Awesome/cheatsheet/">change icons</a> by <a rel="nofollow" href="http://fontawesome.info/font-awesome-icon-world-map/">Font Awesome</a>. Example: &lt;i class=&quot;fa fa-video-camera&quot;&gt;&lt;/i&gt; Etiam interdum elementum massa, sit amet pretium orci sollicitudin pellenue. Aenean risus neque, dignissim nec orci in, hendrerit tempor ligula.</p>
                    </div>
                    <div class="col-md-5 col-xs-12 text-center">
                        <img src="images/product-2.png" alt="">
                    </div>
                </div> <!-- .col-md-6 -->
            </div>
        </div>
    </div> <!-- #products -->


    <!-- VIDEO FEATURe -->
    <div id="video" class="video-feature content-section">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="video embed-responsive embed-responsive-16by9">
                       
                    </div>
                </div> <!-- .col-md-8 -->
            </div> <!-- .row -->
        </div> <!-- .container -->
    </div> <!-- .video-feature -->


    <!-- CONTACT -->
    <div class="content-section" id="contact">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center section-header">
                    <h2 class="section-title">Contact Us</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam quisquam magni praesentium minima quidem tempore deserunt dolor! Tenetur eveniet suscipit, velit aperiam quam nostrum id iure obcaecati.</p>
                </div>
            </div>
            <div class="row">
               <div class="col-md-5 contact-info">
                   <p>Etiam interdum elementum massa amaas, sit amet pretium orci sollicitudin pellenue. Aeneanss risus neque, dignissim nec orci in. <br><br>Hendrerit tempor ligula. Suspendisse sed nisi eget sapien ltrices.</p>
                   <ul>
                       <li><i class="fa fa-phone"></i> 090-080-0980</li>
                       <li><i class="fa fa-map-marker"></i> 360 Aenean Quis Semper, Maecenas 10450</li>
                       <li><i class="fa fa-envelope"></i> <a href="mailto:info@company.com">info@company.com</a></li>
                   </ul>
               </div> <!-- .col-md-5 -->
               <div class="col-md-7">
                    <div class="row">
                        <form class="contact-form" action="#" method="post">
                           <fieldset class="col-md-6">
                               <input type="text" name="name" placeholder="Name...">
                           </fieldset>
                           <fieldset class="col-md-6">
                               <input type="email" name="email" placeholder="Email...">
                           </fieldset>
                           <fieldset class="col-md-12">
                               <input type="text" name="subject" placeholder="Subject...">
                           </fieldset>
                           <fieldset class="col-md-12">
                               <textarea name="message" id="message" cols="30" rows="5" placeholder="Message..."></textarea>
                           </fieldset>
                           <fieldset class="col-md-12">
                               <input type="submit" value="Send Message" class="main-button">
                           </fieldset>
                        </form>
                    </div> <!-- .row -->
               </div> <!-- .col-md-8 -->
            </div> <!-- .row -->
        </div> <!-- .container -->
    </div> <!-- #contact -->


    <!-- FOOTER -->
    <footer class="site-footer">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-right">
                    <p>Copyright &copy; 2084 Your Company Name | Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a> - More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> </p>
                </div> <!-- .col-md-12 -->
            </div> <!-- .row -->
        </div> <!-- .container -->
    </footer> <!-- .site-footer -->
    

    <script src="js/vendor/jquery-1.10.1.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
    
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/templatemo_custom.js"></script> 
    
</body>
</html>